<style include="cr-shared-style">
:host {
  background: var(--md-background-color);
  color: var(--cr-primary-text-color);
  height: inherit;
}

#description,
#required-legend {
  margin-top: 22px;
}

#description,
#form-buttons,
#required-legend,
#title {
  padding: 0 17px;
}

.informative {
  font-size: 13px;
  line-height: 13px;
}

#feedback-confirmation {
  width: initial;
}

#fine-log-warning {
  color: var(--google-red-500);
  margin: 10px 0;
}

#feedback-type-toggle,
.question {
  padding: 16px 17px;
}

.question-part {
  padding: 8px 17px;
}

#form {
  background-color: var(--cr-card-background-color);
  border-radius: var(--cr-card-border-radius);
  box-shadow: var(--cr-card-shadow);
  margin: -100px auto 48px auto;
  padding: 34px 17px;
  padding-inline-end: 24px;
  padding-inline-start: 24px;
  width: 720px;
  z-index: 1;
}

#form-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 34px;
}

#header {
  margin-bottom: 22px;
}

#header-banner {
  background-color: var(--google-blue-500);
  height: 278px;
}

md-dialog {
  width: 80%;
}

md-dialog-content {
  padding: 20px;
}

textarea,
cr-radio-button {
  font-size: 16px;
}

textarea {
  font-family: inherit;
}

cr-radio-button {
  padding: 0;
}

pre {
  border: 1px solid rgb(191, 191, 191);
  font-size: 9.75px;
  margin: 24px 0;
  max-height: 240px;
  min-height: 120px;
  overflow: scroll;
  width: 100%;
}

.required-message {
  color: var(--google-red-500);
}

.send-logs {
  font-size: 15px;
}

.h1,
.h2,
.h3 {
  line-height: 135%;
  margin-bottom: 10px;
}

.h1 {
  font-size: 32px;
}

.h2 {
  font-size: 20px;
}

.h3 {
  font-size: 18px;
}

</style>

<div>
  <div id="header-banner"></div>
  <div id="form">
    <div id="header">
      <div class="h1">$i18n{header}</div>
      <div id="description" class="informative">
        $i18nRaw{formDescription}
      </div>
      <div id="required-legend"
           class="informative required-message">
        * $i18n{required}
      </div>
    </div>
    <div id="feedback-type-toggle">
      <div class="h2">$i18n{typeQuestion}</div>
      <cr-radio-group selected="{{feedbackType_}}">
        <cr-radio-button name="[[FeedbackType_.BUG]]">
          $i18n{typeBugOrError}
        </cr-radio-button>
        <cr-radio-button name="[[FeedbackType_.FEATURE_REQUEST]]">
          $i18n{typeFeatureRequest}
        </cr-radio-button>
        <cr-radio-button name="[[FeedbackType_.MIRRORING_QUALITY]]">
          $i18n{typeProjectionQuality}
        </cr-radio-button>
        <cr-radio-button name="[[FeedbackType_.DISCOVERY]]">
          $i18n{typeDiscovery}
        </cr-radio-button>
        <cr-radio-button name="[[FeedbackType_.OTHER]]">
          $i18n{typeOther}
        </cr-radio-button>
      </cr-radio-group>
    </div>
    <div class="question"
         hidden="[[!showDefaultSection_(feedbackType_)]]">
      <div class="h2">
        $i18n{prompt}
        <span class="required-message"
              hidden="[[sufficientFeedback_]]">*</span>
      </div>
      <textarea placeholder="$i18n{yourAnswer}"
                rows="8" cols="60"
                value="{{comments_::input}}">
      </textarea>
    </div>
    <template is="dom-if"
              if="[[showMirroringQualitySection_(feedbackType_)]]">
      <div class="question">
        <div class="h2">
          $i18n{mirroringQualitySubheading}
          <span class="required-message"
                hidden="[[sufficientFeedback_]]">*</span>
        </div>
        <div class="question-part">
          <div class="h3">$i18n{videoSmoothness}</div>
          <cr-radio-group selected="{{videoSmoothness_}}">
            <cr-radio-button name="1">
              1 ($i18n{videoFreezes})
            </cr-radio-button>
            <cr-radio-button name="2">
              2 ($i18n{videoJerky})
            </cr-radio-button>
            <cr-radio-button name="3">
              3 ($i18n{videoStutter})
            </cr-radio-button>
            <cr-radio-button name="4">
              4 ($i18n{videoSmooth})
            </cr-radio-button>
            <cr-radio-button name="5">
              5 ($i18n{videoPerfect})
            </cr-radio-button>
            <cr-radio-button name="0">
              $i18n{na}
            </cr-radio-button>
          </cr-radio-group>
        </div>
        <div class="question-part">
          <div class="h3">$i18n{videoQuality}</div>
          <cr-radio-group selected="{{videoQuality_}}">
            <cr-radio-button name="1">
              1 ($i18n{videoUnwatchable})
            </cr-radio-button>
            <cr-radio-button name="2">
              2 ($i18n{videoPoor})
            </cr-radio-button>
            <cr-radio-button name="3">
              3 ($i18n{videoAcceptable})
            </cr-radio-button>
            <cr-radio-button name="4">
              4 ($i18n{videoGood})
            </cr-radio-button>
            <cr-radio-button name="5">
              5 ($i18n{videoGreat})
            </cr-radio-button>
            <cr-radio-button name="0">
              $i18n{na}
            </cr-radio-button>
          </cr-radio-group>
        </div>
        <div class="question-part">
          <div class="h3">$i18n{audioQuality}</div>
          <cr-radio-group selected="{{audioQuality_}}">
            <cr-radio-button name="1">
              1 ($i18n{audioUnintelligible})
            </cr-radio-button>
            <cr-radio-button name="2">
              2 ($i18n{audioPoor})
            </cr-radio-button>
            <cr-radio-button name="3">
              3 ($i18n{audioAcceptable})
            </cr-radio-button>
            <cr-radio-button name="4">
              4 ($i18n{audioGood})
            </cr-radio-button>
            <cr-radio-button name="5">
              5 ($i18n{audioPerfect})
            </cr-radio-button>
            <cr-radio-button name="0">
              $i18n{na}
            </cr-radio-button>
          </cr-radio-group>
        </div>
      </div>
      <div class="question">
        <div class="h2">$i18n{contentQuestion}</div>
        <cr-input placeholder="$i18n{yourAnswer}"
                  value="{{projectedContentUrl_}}">
        </cr-input>
      </div>
      <div class="question">
        <div class="h2">
          $i18n{additionalComments}
          <span class="required-message"
                hidden="[[sufficientFeedback_]]">*</span>
        </div>
        <textarea placeholder="$i18n{yourAnswer}"
                  rows="8" cols="60"
                  value="{{comments_::input}}">
        </textarea>
      </div>
    </template>
    <template is="dom-if"
              if="[[showDiscoverySection_(feedbackType_)]]">
      <div class="question">
        <div class="h2">
          $i18nRaw{setupVisibilityQuestion}
          <span class="required-message"
                hidden="[[sufficientFeedback_]]">*</span>
        </div>
        <cr-radio-group selected="{{visibleInSetup_}}">
          <cr-radio-button name="Yes">
            $i18n{yes}
          </cr-radio-button>
          <cr-radio-button name="No">
            $i18n{no}
          </cr-radio-button>
          <cr-radio-button value="Unknown">
            $i18n{didNotTry}
          </cr-radio-button>
        </cr-radio-group>
      </div>
      <div class="question">
        <div class="h2">$i18n{softwareQuestion}</div>
        <cr-radio-group selected="{{hasNetworkSoftware_}}">
          <cr-radio-button name="Yes">
            $i18n{yes}
          </cr-radio-button>
          <cr-radio-button name="No">
            $i18n{no}
          </cr-radio-button>
          <cr-radio-button name="Unknown">
            $i18n{unknown}
          </cr-radio-button>
        </cr-radio-group>
      </div>
      <div class="question">
        <div class="h2">$i18n{networkQuestion}</div>
        <cr-radio-group ng-model="networkDescription">
          <cr-radio-button name="SameWifi">
            $i18n{networkSameWifi}
          </cr-radio-button>
          <cr-radio-button name="DifferentWifi">
            $i18n{networkDifferentWifi}
          </cr-radio-button>
          <cr-radio-button name="WiredPC">
            $i18n{networkWiredPc}
          </cr-radio-button>
        </cr-radio-group>
      </div>
      <div class="question">
        <div class="h2">
          $i18n{additionalComments}
          <span class="required-message"
                hidden="[[sufficientFeedback_]]">*</span>
        </div>
        <textarea placeholder="$i18n{yourAnswer}"
                  rows="8" cols="60"
                  value="{{comments_::input}}">
        </textarea>
      </div>
    </template>
    <div class="question">
      <div class="h2">$i18n{emailField}</div>
      <cr-input placeholder="$i18n{yourAnswer}"
                value="{{userEmail_}}"
                type="text">
      </cr-input>
      <cr-checkbox checked="{{attachLogs_}}"
                   aria-description="$i18n{sendLogs}">
        <span class="send-logs">
          $i18nRaw{sendLogsHtml}
        </span>
      </cr-checkbox>
      <p class="informative">
        $i18n{privacyDataUsage}
      </p>
    </div>
    <div id="form-buttons">
      <cr-button class="cancel-button"
                 on-click="onCancel_">
        $i18n{cancel}
      </cr-button>
      <cr-button class="action-button"
                 on-click="onSubmit_"
                 disabled="[[!sufficientFeedback_]]">
        $i18n{sendButton}
      </cr-button>
    </div>
  </div>

  <cr-dialog id="sendDialog">
    <div slot="body">
      [[sendDialogText_]]
    </div>
    <div slot="button-container">
      <cr-button on-click="onSendDialogOk_"
                 hidden="[[!sendDialogIsInteractive_]]">
        $i18n{ok}
      </cr-button>
    </div>
  </cr-dialog>

  <cr-dialog id="logsDialog">
    <div slot="title">$i18n{logsHeader}</div>
    <div slot="body">
      <div id="fine-log-warning"
           class="informative">
        $i18n{fineLogsWarning}
      </div>
      <pre>[[logData_]]</pre>
      <div class="send-logs">
        <cr-checkbox checked="{{attachLogs_}}"
                     aria-description="$i18n{sendLogs}">
          <span class="send-logs">
            $i18n{sendLogs}
          </span>
        </cr-checkbox>
      </div>
    </div>
    <div slot="button-container">
      <cr-button on-click="onLogsDialogOk_">$i18n{ok}</cr-button>
    </div>
  </cr-dialog>
</div>
